<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css"> -->
  <style>
    .container {
      padding: 0;
      width: 300px;
    }

    .form-text {
      color: red !important;
    }
    .img{
      display: inline-block;
      width: 200px;
      height: 300px;
      border: 1px solid black;
      background: pink;
      text-align: center;
    }
    iframe{
      width: 1600px;
      height: 300px;

    }
  </style>
</head>

<body>
  <section class="container">
    <form>
      <div class="form-group">
        <label>真实姓名</label>
        <input type="text" class="form-control" id='userNameInp'>
        <small class="form-text text-muted" id='userNameTip'></small>
      </div>
      <div class="form-group">
        <label>邮箱</label>
        <input type="email" class="form-control" id='userEmailInp'>
        <small class="form-text text-muted" id='userEmailTip'></small>
      </div>
      <div class="form-group">
        <label>电话</label>
        <input type="text" class="form-control" id='userPhoneInp'>
        <small class="form-text text-muted" id='userPhoneTip'></small>
      </div>
      <div class="form-group">
        <label>密码</label>
        <input type="password" class="form-control" id='userPassInp'>
        <small class="form-text text-muted" id='userPassTip'></small>
      </div>
      <div class="form-group">
        <label>确认密码</label>
        <input type="password" class="form-control" id='userPassConfirmInp'>
        <small class="form-text text-muted" id='userPassConfirmTip'></small>
      </div>
      <button type="button" class="btn btn-primary" id='submit'>提交</button>
    </form>
    <div>
      <img class="img" src="123" title="你的图片丢失了">
      <iframe src="http://localhost:8080/checkDetail">12345</iframe>
    </div>
  </section>
  <script>
    let reginModule = (function () {
      let query = function (selector) {
        return document.querySelector(selector);
      }
      let userNameInp = query('#userNameInp'),
        userNameTip = query('#userNameTip'),
        userEmailInp = query('#userEmailInp'),
        userEmailTip = query('#userEmailTip'),
        userPhoneInp = query('#userPhoneInp'),
        userPhoneTip = query('#userPhoneTip'),
        userPassInp = query('#userPassInp'),
        userPassTip = query('#userPassTip'),
        userPassConfirmInp = query('#userPassConfirmInp'),
        userPassConfirmTip = query('#userPassConfirmTip'),
        submit = query('#submit');

      // 姓名验证 trim() 去除字符串的首尾空格
      let checkName = function checkName() {
        let val = userNameInp.value.trim(),
          reg = /^[\u4E00-\u9FA5]{2,10}(·[\u4E00-\u9FA5]{2,10})?$/;
        if (val.length === 0) {
          userNameTip.innerHTML = '真实姓名不能为空';
          return false;
        }
        if (!reg.test(val)) {
          userNameTip.innerHTML = '不符合姓名格式';
          return false;
        }
        userNameTip.innerHTML = '';
        return true;
      };
      //EMAIL
      let checkEmail = function checkEmail() {
        let val = userEmailInp.value.trim(),
          reg = /^\w+((-\w+)|(\.\w+))*@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
        if (val.length === 0) {
          userEmailTip.innerHTML = '邮箱不能为空';
          return false;
        }
        if (!reg.test(val)) {
          userEmailTip.innerHTML = '邮箱格式不正确';
          return false;
        }
        userEmailTip.innerHTML = '';
        return true;
      };
      // 手机号
      let checkPhone = function checkPhone() {
        let val = userPhoneInp.value.trim(),
          reg = /^1[3-9]\d{9}$/;
        if (val.length === 0) {
          userPhoneTip.innerHTML = '手机号不能为空';
          return false;
        }
        if (!reg.test(val)) {
          userPhoneTip.innerHTML = '手机号格式不正确';
          return false;
        }
        userPhoneTip.innerHTML = '';
        return true;
      };
      // 密码
      let checkPass = function checkPass() {
        let val = userPassInp.value.trim(),
          reg = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[\d(a-z)(A-Z)]{6,16}$/;
        if (val.length === 0) {
          userPassTip.innerHTML = '密码不能为空';
          return false;
        }
        if (!reg.test(val)) {
          userPassTip.innerHTML = '密码格式不正确';
          return false;
        }
        userPassTip.innerHTML = '';
        return true;
      };
      // 确认密码
      let checkPassC = function checkPassC() {
        let val = userPassConfirmInp.value.trim(),
          val2 = userPassInp.value.trim();
        if (val !== val2) {
          userPassConfirmTip.innerHTML = '密码不一致';
          return false;
        }
        userPassConfirmTip.innerHTML = '';
        return true;
      };
      // 提交
      let handel = function handel() {
        if (!checkName() || !checkEmail() || !checkPass() || !checkPassC() || !checkPhone()) {
          return;
        }
        alert('请去登录');
      }
      return {
        init() {
          userNameInp.onblur = checkName;
          userEmailInp.onblur = checkEmail;
          userPhoneInp.onblur = checkPhone;
          userPassInp.onblur = checkPass;
          userPassConfirmInp.onblur = checkPassC;
          submit.onclick = handel;
        }
      };
    })();
    reginModule.init();
  </script>
</body>

</html>